<template>
	<div class="variable-select-single-container">
		<el-form-item :prop="prop" :rules="rules.inputText">
			<el-select :value="inputText" placeholder="请选择变量描述" :disabled="showDetail" :popper-append-to-body="false" class="varscrollSelect" style="width: 150px" size="mini">
				<el-tabs v-model="activeName" @tab-click="handleClick" class="variable-judge-customer-text">
					<el-tab-pane label="客户信息" name="customer" class="customer-box">
						<div class="variable-judge-role-box">
							<p class="role-text">角色：</p>
							<el-tag v-for="item in roleData" :key="item.id" class="role-tag" :class="{ activeTag: activeTag === item.id }" @click="checkRole(item.id)">{{ item.name }}</el-tag>
						</div>
						<!-- `客户信息-${v.roleName}-${v.name}`   v.name-->
						<el-option v-for="v in getVariablesByRole()" :key="v.id" :label="v.id">
							<div class="label" :class="selectId === v.id ? 'select' : ''" @click="onVariable(v)">{{ v.name }}</div>
						</el-option>
					</el-tab-pane>
					<el-tab-pane label="业务信息" name="business">
						<el-option v-for="v in businessData" :key="v.id" :label="v.id">
							<div class="label" :class="selectId === v.id ? 'select' : ''" @click="onBizVariable(v)">{{ v.name }}</div>
						</el-option>
					</el-tab-pane>
				</el-tabs>
			</el-select>
		</el-form-item>
	</div>
</template>

<script>
export default {
	name: '',
	components: {},
	props: {
		prop: {
			type: String,
			default: () => ''
		},
		roleData: {
			type: Array,
			required: true,
			default: () => []
		},
		describeList: {
			type: Array,
			required: true,
			default: () => []
		},
		businessData: {
			type: Array,
			required: true,
			default: () => []
		},
		condition: {
			type: Object,
			required: true,
			default: () => {}
		},
		rules: {
			type: Object,
			required: true,
			default: () => {}
		},

		showDetail: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			activeName: 'customer',
			activeTag: 0,
			inputText: '',
			selectId: ''
		};
	},
	watch: {
		roleData(newVal) {
			if (newVal && newVal[0]) {
				this.activeTag = newVal[0].id;
			}
		},
		describeList(newVal) {
			if (newVal && this.businessData) {
				this.parseInData();
			}
		},
		businessData(newVal) {
			if (newVal && this.describeList) {
				this.parseInData();
			}
		}
	},
	mounted() {
		if (this.describeList && this.businessData) {
			this.$nextTick(() => {
				this.parseInData();
			});
		}
		if (this.roleData && this.roleData[0]) {
			this.activeTag = this.roleData[0].id;
		}
	},
	methods: {
		parseInData() {
			const { id } = this.condition;
			this.selectId = id;
			for (const item of this.describeList) {
				if (item.id === id) {
					this.inputText = `客户信息-${item.roleName}-${item.name}`;
					break;
				}
			}
			if (!this.inputText) {
				for (const item of this.businessData) {
					if (item.id === id) {
						this.inputText = `业务信息-${item.name}`;
						break;
					}
				}
			}
		},
		getVariablesByRole() {
			return this.describeList.filter(item => item.roleId === this.activeTag);
		},
		checkRole(id) {
			this.activeTag = id;
		},
		onVariable(value) {
			this.selectId = value.id;
			this.inputText = `客户信息-${value.roleName}-${value.name}`;
			this.onChange('customer');
		},
		onBizVariable(value) {
			this.selectId = value.id;
			this.inputText = `业务信息-${value.name}`;
			this.onChange('business', value);
		},
		onChange(activeName) {
			const data = { ...this.condition };
			data.activeName = activeName;
			data.inputText = this.inputText;
			data.id = this.selectId;
			data.validateName = this.inputText;
			data.variableName = this.inputText;
			data.rule = this.rule;
			this.$emit('change', data);
		}
	}
};
</script>

<style lang="less" scoped>
.variable-select-single-container {
	.el-checkbox {
		padding: 0 10px;
	}
	.setting {
		position: relative;
		width: 90%;
		padding: 14px;
		text-align: left;
		left: 0;
		right: 0;
		.el-button {
			background-color: #fff;
			border: 1px solid #6384fe;
			color: #6384fe;
		}
	}
	.answer-branch {
		background-color: #f9f9f9;
		margin-top: 15px;
		position: relative;
		padding: 10px;
		margin-right: 50px;
		.branch-text {
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 20px;
		}
		.el-select.enumeration-select {
			width: 20%;
		}
		.add-btn {
			position: absolute;
			bottom: 0;
			right: -30px;
		}
		.del-btn {
			position: absolute;
			top: 0;
			right: -30px;
		}
		.add-condition {
			width: 80px;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #6384fe;
			cursor: pointer;
			margin-left: 20px;
			margin-bottom: 10px;
		}
		.delIcon {
			width: 10px;
			height: 10px;
			color: #8d8d92;
			margin-top: 10px;
			font-size: 16px;
			cursor: pointer;
		}
	}
	/deep/ .el-tabs__nav-wrap::after {
		background-color: none !important;
		position: relative;
		height: 0;
	}
	.label {
		width: 100%;
	}
	.select {
		color: #409eff;
		font-weight: 700;
	}
}
</style>
<style lang="less">
.answer-branch .varscrollSelect .el-select__tags {
	max-height: 231px;
	width: 100%;
	overflow-y: auto;
}
.answer-branch .varscrollSelect .el-select-dropdown__list {
	width: 641px;
}
.variable-judge-customer-text {
	margin-left: 17px;
}

.answer-branch .el-tabs__active-bar {
	background-color: #6384fe !important;
	width: 56px !important;
}
.answer-branch .el-tabs__item {
	font-size: 15px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #b7b7b7 !important;
}
.answer-branch .el-tabs__item.is-active {
	color: #6384fe !important;
}

.answer-branch .el-tabs__nav-wrap::after {
	background-color: none !important;
	position: relative;
	height: 0;
}
</style>
<style>
.variable-judge-role-box {
	display: flex;
}
.variable-judge-role-box .role-text {
	font-size: 13px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
}
.variable-judge-role-box .role-tag {
	border: 1px solid #c9def8;
	height: 32px;
	background: #ffffff !important;
	border-radius: 4px;
	color: #6784f2 !important;
	margin: 0 7px;
	cursor: pointer;
}
.variable-judge-role-box .activeTag {
	border: 1px solid #c9def8;
	height: 32px;
	border-radius: 4px;
	background: #e7f2fe !important;
	color: #5374f2 !important;
	margin: 0 7px;
	cursor: pointer;
}
</style>
